<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .el-textarea__inner, .el-input__inner {
            background: transparent !important;
            border: 2px solid hsla(0, 0%, 100%, .7);
        }
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body style="background-color: #161823;height: 100%;color:#87878e;font-size: 14px">
<div id="app" v-cloak>
    <el-container>
        <!-- 1.左主体 -->
        <my-aside></my-aside>
        <!-- 2.右边栏 -->
        <el-main>
            <!-- 2.1右头边栏 -->
            <my-header></my-header>
            <!-- 2.2右主体 -->
            <el-footer>
                <!-- 2.2右主体视频 -->
                <!--        个人中心开始-->
                <!--       未登录状态开始-->

                <el-row>
                    <el-col :span="12">
                        <div style="margin: 55px 0 24px 0 ;width: 723px;height: 100px;">
                            <img src="loginimgs/user_wei1.png"
                                 style="border: 1px solid #87878e; width: 112px; height: 112px; border-radius: 90px;">
                            <span style="position: absolute;margin:0 0 0 40px;">
                                <h1 style="color: white;font-size: 20px;font-weight:400;line-height: 28px;margin-bottom: 14px;">
                                 未登录
                                </h1>
                                <div>
                                    <span style=" font-size: 16px;">关注  - </span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span style=" font-size: 16px;">粉丝  - </span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span style=" font-size: 16px;">获赞  - </span>
                                </div>
                            </span>
                        </div>
                        <div style="width: 1200px;height: 100px;margin: 68px 0 24px 0 ;font-size: 20px">

                            <el-menu :default-active="activeIndex"
                                     mode="horizontal"
                                     class="el-menu-demo"
                                     background-color="#161823"
                                     active-text-color="#ffffff"

                                     style="text-decoration: none">
                                <el-menu-item index="1" style="font-size: 20px; " disabled><span >作品</span>
                                </el-menu-item>
                                <el-menu-item index="2" style="font-size: 20px;" disabled><span>喜欢</span>
                                </el-menu-item>
                                <el-menu-item index="3" style="font-size: 20px;" disabled><span>收藏</span>
                                </el-menu-item>
                                <el-menu-item index="4" style="font-size: 20px;" disabled><span>观看历史</span>
                                </el-menu-item>
                            </el-menu>
                        </div>
                    </el-col>
                    <el-col :span="12"></el-col>
                </el-row>
                <!--       未登录状态结束-->
                <div style="position: relative">
                    <div style="margin: 15px 50px 50px 400px ;position: absolute">
                        <img src="loginimgs/img.png" style="width: 100px;height:100px;">
                    </div>
                </div>
                <!--        个人中心结束-->
            </el-footer>
        </el-main>
    </el-container>
<!--    <el-container>-->
<!--        &lt;!&ndash; 1.头部 &ndash;&gt;-->
<!--        <el-header>-->
<!--            <el-row :gutter="20" style="padding: 10px;">-->
<!--                &lt;!&ndash; 1.1 左上图标 &ndash;&gt;-->
<!--                <el-col :span="16">-->
<!--                    <el-row>-->
<!--                        &lt;!&ndash; 图标开始 &ndash;&gt;-->
<!--                        <el-col span="14">-->
<!--                            <a href="javaScript:;"-->
<!--                               style="color: white;text-decoration: none;display: flex;align-items: center">-->
<!--                                <i class="el-icon-headset" style="font-size: 40px"></i>-->
<!--                                <span style="font-size: 24px;margin-left: 5px">抖young</span>-->
<!--                            </a>-->
<!--                        </el-col>-->
<!--                        &lt;!&ndash; 图标结束 &ndash;&gt;-->
<!--                        &lt;!&ndash; 搜索开始 &ndash;&gt;-->
<!--                        <el-col span="10">-->
<!--                            <div style="margin-top: 10px">-->
<!--                                <el-input placeholder="请输入内容">-->
<!--                                    <el-button slot="append" icon="el-icon-search">搜索</el-button>-->
<!--                                </el-input>-->
<!--                            </div>-->
<!--                        </el-col>-->
<!--                        &lt;!&ndash; 搜索结束 &ndash;&gt;-->
<!--                    </el-row>-->
<!--                </el-col>-->
<!--                &lt;!&ndash; 1.2 右上工具 &ndash;&gt;-->
<!--                <el-col :span="8"></el-col>-->
<!--            </el-row>-->
<!--        </el-header>-->
<!--        &lt;!&ndash; 2.主体 &ndash;&gt;-->
<!--        <el-container>-->
<!--            &lt;!&ndash; 2.1 左边栏 &ndash;&gt;-->
<!--            <el-aside width="100px" style="margin-left: 10px ">-->
<!--                <el-menu-->
<!--                        default-active="5"-->
<!--                        class="el-menu-vertical-demo"-->
<!--                        background-color="#161823"-->
<!--                        active-text-color="#ffffff"-->
<!--                        style="border: none;">-->
<!--                    <el-menu-item index="1" style="border-radius: 10px"><i class="el-icon-user">首页</i></el-menu-item>-->
<!--                    <el-menu-item index="2" style="border-radius: 10px"><i class="el-icon-picture">推荐</i>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="3" style="border-radius: 10px"><i class="el-icon-s-order">关注</i>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="4" style="border-radius: 10px"><i class="el-icon-video-camera">朋友</i>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="5" style="border-radius: 10px"><i class="el-icon-info">我的</i></el-menu-item>-->
<!--                    <el-divider></el-divider>-->
<!--                    <el-menu-item index="6" style="border-radius: 10px"><i class="el-icon-info">直播</i></el-menu-item>-->
<!--                    <el-menu-item index="7" style="border-radius: 10px"><i class="el-icon-info">放映室</i>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="8" style="border-radius: 10px"><i class="el-icon-info">知识</i></el-menu-item>-->
<!--                    <el-menu-item index="9" style="border-radius: 10px"><i class="el-icon-info">热点</i></el-menu-item>-->
<!--                    <el-menu-item index="10" style="border-radius: 10px"><i class="el-icon-info">游戏</i></el-menu-item>-->
<!--                    <el-menu-item index="11" style="border-radius: 10px"><i class="el-icon-info">游戏</i></el-menu-item>-->
<!--                    <el-menu-item index="12" style="border-radius: 10px"><i class="el-icon-info">二次元</i>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="13" style="border-radius: 10px"><i class="el-icon-info">音乐</i></el-menu-item>-->
<!--                    <el-menu-item index="14" style="border-radius: 10px"><i class="el-icon-info">美食</i></el-menu-item>-->
<!--                    <el-menu-item index="15" style="border-radius: 10px"><i class="el-icon-info">体育</i></el-menu-item>-->
<!--                    <el-menu-item index="16" style="border-radius: 10px"><i class="el-icon-info">时尚</i></el-menu-item>-->
<!--                </el-menu>-->
<!--            </el-aside>-->
<!--            &lt;!&ndash; 2.2 右主体 &ndash;&gt;-->
<!--            <el-main>-->
<!--                &lt;!&ndash;        个人中心开始&ndash;&gt;-->
<!--                &lt;!&ndash;       未登录状态开始&ndash;&gt;-->

<!--                <el-row>-->
<!--                    <el-col :span="12">-->
<!--                        <div style="margin: 55px 0 24px 0 ;width: 723px;height: 100px;">-->
<!--                            <img src="loginimgs/user_wei1.png"-->
<!--                                 style="border: 1px solid #87878e; width: 112px; height: 112px; border-radius: 90px;">-->
<!--                            <span style="position: absolute;margin:0 0 0 40px;">-->
<!--                                <h1 style="color: white;font-size: 20px;font-weight:400;line-height: 28px;margin-bottom: 14px;">-->
<!--                                 未登录-->
<!--                                </h1>-->
<!--                                <div>-->
<!--                                    <span style=" font-size: 16px;">关注  - </span>-->
<!--                                    <el-divider direction="vertical"></el-divider>-->
<!--                                    <span style=" font-size: 16px;">粉丝  - </span>-->
<!--                                    <el-divider direction="vertical"></el-divider>-->
<!--                                    <span style=" font-size: 16px;">获赞  - </span>-->
<!--                                </div>-->
<!--                            </span>-->
<!--                        </div>-->
<!--                        <div style="width: 1200px;height: 100px;margin: 68px 0 24px 0 ;font-size: 20px">-->

<!--                            <el-menu :default-active="activeIndex"-->
<!--                                     mode="horizontal"-->
<!--                                     class="el-menu-demo"-->
<!--                                     background-color="#161823"-->
<!--                                     active-text-color="#ffffff"-->

<!--                                     style="text-decoration: none">-->
<!--                                <el-menu-item index="1" style="font-size: 20px; " disabled><span >作品</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="2" style="font-size: 20px;" disabled><span>喜欢</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="3" style="font-size: 20px;" disabled><span>收藏</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="4" style="font-size: 20px;" disabled><span>观看历史</span>-->
<!--                                </el-menu-item>-->
<!--                            </el-menu>-->
<!--                        </div>-->
<!--                    </el-col>-->
<!--                    <el-col :span="12"></el-col>-->
<!--                </el-row>-->
<!--                &lt;!&ndash;       未登录状态结束&ndash;&gt;-->
<!--                <div style="position: relative">-->
<!--                    <div style="margin: 15px 50px 50px 400px ;position: absolute">-->
<!--                        <img src="loginimgs/img.png" style="width: 100px;height:100px;">-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;        个人中心结束&ndash;&gt;-->
<!--            </el-main>-->
<!--        </el-container>-->
<!--    </el-container>-->
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.js"></script>
<script src="js/aside.js"></script>
<script src="js/header.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                appArr: [
                    {title: '直播'},
                    {title: '放映室'},
                    {title: '知识'},
                    {title: '热点'},
                    {title: '游戏'},
                    {title: '娱乐'},
                    {title: '二次元'},
                    {title: '音乐'},
                    {title: '美食'},
                    {title: '体育'},
                    {title: '时尚'}
                ],
                activeName: [

                ],
                activeIndex: '1'
            }
        },
        methods: {
            handleClick(key) {
                console.log(key);
            },
        }
    })
</script>
</html>